<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="head::common_header">
</head>
<body>
<div th:replace="header :: header"></div>

<!-- 联系我们 -->
<section class="contact" id="contact">

    <h1 class="heading">
        <span>c</span>
        <span>o</span>
        <span>n</span>
        <span>t</span>
        <span>a</span>
        <span>c</span>
        <span>t</span>
    </h1>

    <div class="row">

        <div class="image">
            <img src="/img/contact-img.svg" alt="">
        </div>

        <form action="" id="contact-form">
            <div class="inputBox">
                <input type="text" id="name" placeholder="Your name">
                <input type="email" id="emailInfo" placeholder="Your email address">
            </div>
            <div class="inputBox">
                <input type="number" id="phone" placeholder="Your call">
                <input type="text" id="topic" placeholder="Feedback topic">
            </div>
            <textarea placeholder="Your feedback content"  name="content" id="content" cols="30" rows="10"></textarea>
            <input type="submit" class="btn" value="Send to us">
        </form>

    </div>

</section>

<!-- 品牌赞助 -->


<!-- 底部 -->

<div th:replace="footer :: footer"></div>


<script>
    $('#contact-form').submit(function (e) {
        e.preventDefault(); // 阻止表单默认提交行为

        console.log('testetstet')
        let name = $('#name').val();
        let email = $('#emailInfo').val();
        let phone = $('#phone').val();
        let topic = $('#topic').val();
        let content = $('#content').val();

        $.ajax({
            type: "post",
            url: "/contactInfo",
            data: {
                "name": name,
                "email": email,
                "phone": phone,
                "topic": topic,
                "content": content,
            },
            success: function (data) {
                iziToast.show(
                    {
                        position: 'topCenter',
                        title: 'info',
                        message: 'successful contact',
                        color: 'green'
                    }
                )
            }
        })
    })


</script>






</body>
</html>
